<template>
  <div class="pay">
    <div class="pay-title"> 请选择支付方式: </div>
    <div class="pay-box">
      <div v-for="method in paymentMethods" :key="method.id" class="pay-list">
        <el-image :src="method.url"></el-image>
        <label :for="'paymentMethod' + method.id">{{ method.name }}</label>
        <input
          type="radio"
          :id="'paymentMethod' + method.id"
          :value="method.id"
          v-model="selectedPaymentMethod"
          @change="updateCheckedStatus(method.id)"
        />
      </div>
      <div class="footer">
        <el-button @click="cancalBack">取消</el-button>
        <el-button type="primary" :disabled="disableSubmit" @click="submit">确定</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Alipay from '@/assets/imgs/Alipay.png'
import Weixin from '@/assets/imgs/Weixin.png'
import { getEnableCodeList, submitOrder } from '@/api/Profile/system'
const emit = defineEmits(['setOrderMap'])
const paymentOption = ref([
  {
    id: 1,
    name: '支付宝',
    type: 'alipay_pc',
    check: false,
    url: Alipay
  },
  {
    id: 2,
    name: '微信支付',
    check: false,
    type: 'weixin',
    url: Weixin
  }
])
const paymentMethods = ref([])
const appId = ref(1)
const changeCode = ref('')

const disableSubmit = ref(false)

const props = defineProps({
  value: Object
})

onMounted(() => {
  getCodeList()
})

const selectedPaymentMethod = ref(null)

const cancalBack = () => {
  emit('setOrderMap', 0)
}

// 获取可用的支付方式
const getCodeList = async () => {
  const result = await getEnableCodeList(appId.value)
  paymentMethods.value = paymentOption.value.filter((item) => result.includes(item.type))
  if (paymentMethods.value.length) {
    changeCode.value = paymentMethods.value[0].type
    paymentMethods.value[0].check = true
    selectedPaymentMethod.value = paymentMethods.value[0].id
  }
}

// 提交订单
const submit = async () => {
  if (selectedPaymentMethod.value) {
    disableSubmit.value = true
    const data = {
      id: props.value.orderId,
      channelCode: changeCode.value,
      returnUrl: location.href
    }
    const { displayContent } = await submitOrder({ ...data })
    sessionStorage.setItem('ORDERID', props.value.orderId)
    setTimeout(() => {
      disableSubmit.value = false
      emit('setOrderMap', 2)
    }, 3e3)
    window.open(displayContent, '_blank')
  } else {
    ElMessage.error('请先选择支付方式')
  }
}

const updateCheckedStatus = (selectedId) => {
  paymentMethods.value.forEach((method) => {
    if (method.id === selectedId) {
      changeCode.value = method.type
      method.check = true
    } else {
      method.check = false
    }
  })
}
</script>

<style lang="scss" scoped>
.pay {
  .pay-title {
  }
  .pay-box {
    padding: 20px 40px 20px 40px;
    .pay-list {
      padding: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      box-shadow: 0 5px 12px -5px #999;
    }
    .footer {
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
  }
}
input[type='radio'] {
  width: 20px;
  height: 20px;
  // opacity: 0.9;
}
input:checked + label {
  background-color: #006eb2;
  border: 1px solid #006eb2;
}

input:checked + label::after {
  position: absolute;
  content: '';
  width: 5px;
  height: 10px;
  top: 3px;
  left: 6px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}
</style>
@/api/Profile/account
